<template>
	<uni-popup ref="popupRef" @change="onPopupChange">
		<view class="patient-info">
			<view class="label">患者情况</view>
			<view class="check-box">
				<view v-for="(i, index) of checkOptions" :key="i" class="check-item" @click="onCheckBoxChange(index)">
					<view :class="['custom-radio', formFields.patientStatus === index && 'custom-radio_checked']"></view>
					{{ i }}
				</view>
			</view>
			<view class="label">所在位置</view>
			<view :class="['address flex-row', !formFields.address && 'empty']" @click="chooseLocation">
				{{ formFields.address || '请选择所在地址' }}
			</view>
			<view class="label">详细地址</view>
			<view class="textarea-box">
				<textarea class="textarea" v-model="formFields.fullAddress" placeholder="请输入详细地址" />
			</view>

			<view class="btn-group">
				<button class="btn-default" @click="onCancel">取消</button>
				<button class="btn-primary" @click="onConfirm">立即呼救</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref, reactive, watchEffect } from 'vue';

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	}
});

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel']);

const checkOptions = ['疑似心脏骤停', '非疑似心脏骤停'];
const popupRef = ref();
const formFields = reactive({
	// 患者情况 1疑似心脏骤停 2非疑似心脏骤停
	patientStatus: 0,
	address: '',
	fullAddress: '',
	latitude: 0,
	longitude: 0
});

watchEffect(() => {
	props.modelValue ? popupRef.value?.open() : popupRef.value?.close();
});

function onPopupChange(e) {
	emit('update:modelValue', e.show);
}

function onCheckBoxChange(index) {
	formFields.patientStatus = index;
}

/**
 * 选择地址
 */
function chooseLocation() {
	uni.chooseLocation({
		success(res) {
			console.log(res);
			formFields.addr = res.name;
			formFields.address = res.address + res.name;
			formFields.latitude = res.latitude;
			formFields.longitude = res.longitude;
		},
		fail() {
			uni.showToast({
				title: '地址选择失败！'
			});
		}
	});
}

function onCancel() {
	formFields.patientStatus = 0;
	formFields.latitude = 0;
	formFields.longitude = 0;
	formFields.address = '';
	formFields.fullAddress = '';
	emit('update:modelValue', false);
	emit('cancel');
}

function onConfirm() {
	const showMsg = (title) => uni.showToast({ title, icon: 'none' });
	if (!formFields.address) return showMsg('还没有选择地址');
	// if (!formFields.fullAddress) return showMsg('还没有填写详细地址')
	emit('update:modelValue', false);
	emit('confirm', formFields);
}
</script>

<style scoped lang="scss">
.patient-info {
	padding: 40rpx;
	width: 690rpx;
	border-radius: 16rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	.label {
		font-weight: bold;
	}
	.check-box {
		color: #333;
		font-size: 28rpx;
		height: 90rpx;
		display: flex;
		.check-item {
			flex: 1;
			display: flex;
			align-items: center;
			column-gap: 12rpx;
		}
	}
	.address {
		padding: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
		border-radius: 8rpx;
		color: #333;
		font-size: 28rpx;
		background-color: #f8f8f8;
		&.empty {
			color: #999;
		}
	}
	.textarea-box {
		width: 100%;
		height: 150rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 50rpx;
		border-radius: 8rpx;
		box-sizing: border-box;
		background-color: #f8f8f8;
		.textarea {
			width: 100%;
			height: 100%;
			font-size: 28rpx;
		}
	}
}
</style>
